<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能盐碱地检测分析平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        .tab-active {
            border-bottom: 3px solid #3b82f6;
            color: #3b82f6;
        }
        .fade-in {
            animation: fadeIn 0.5s ease-in-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        .progress-bar {
            transition: width 1s ease-in-out;
        }
        .scale-hover {
            transition: transform 0.2s ease;
        }
        .scale-hover:hover {
            transform: scale(1.03);
        }
        .slide-in {
            animation: slideIn 0.4s ease-out;
        }
        @keyframes slideIn {
            from { transform: translateY(20px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
    </style>
</head>
<body class="gradient-bg min-h-screen font-sans">
    <div class="container mx-auto px-4 py-8 max-w-6xl">
        <!-- 登录模态框 -->
        <div id="login-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
            <div class="bg-white rounded-xl shadow-xl w-full max-w-md p-6 slide-in">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-xl font-bold text-gray-800">用户登录</h2>
                    <button id="close-login" class="text-gray-400 hover:text-gray-600">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="space-y-4">
                    <div>
                        <label class="block text-gray-700 mb-2">用户名</label>
                        <input type="text" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-gray-700 mb-2">密码</label>
                        <input type="password" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <button class="w-full py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition flex items-center justify-center">
                        <i class="fas fa-sign-in-alt mr-2"></i>登录
                    </button>
                    <div class="flex justify-between text-sm text-gray-500">
                        <label class="flex items-center">
                            <input type="checkbox" class="mr-1">记住我
                        </label>
                        <a href="#" class="text-blue-500 hover:underline">忘记密码?</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 头部导航 -->
        <header class="flex justify-between items-center mb-8">
            <div class="flex items-center">
                <i class="fas fa-leaf text-2xl text-green-500 mr-2"></i>
                <h1 class="text-2xl font-bold text-gray-800">智能盐碱地检测</h1>
            </div>
            <div class="flex space-x-4">
                <button id="login-btn" class="px-4 py-2 rounded-full bg-blue-500 text-white hover:bg-blue-600 transition flex items-center">
                    <i class="fas fa-user mr-2"></i>登录
                </button>
                <button class="px-4 py-2 rounded-full bg-gray-200 text-gray-700 hover:bg-gray-300 transition flex items-center">
                    <i class="fas fa-cog mr-2"></i>设置
                </button>
            </div>
        </header>

        <!-- 主内容区 -->
        <div class="bg-white rounded-2xl shadow-lg overflow-hidden">
            <!-- 标签导航 -->
            <div class="flex border-b">
                <button id="tab-analysis" class="flex-1 py-4 font-medium text-gray-600 hover:text-blue-500 tab-active flex items-center justify-center">
                    <i class="fas fa-map-marked-alt mr-2"></i>地形分析
                </button>
                <button id="tab-biomass" class="flex-1 py-4 font-medium text-gray-600 hover:text-blue-500 flex items-center justify-center">
                    <i class="fas fa-tree mr-2"></i>生物量统计
                </button>
                <button id="tab-data" class="flex-1 py-4 font-medium text-gray-600 hover:text-blue-500 flex items-center justify-center">
                    <i class="fas fa-database mr-2"></i>数据管理
                </button>
            </div>

            <!-- 地形分析页面 -->
            <div id="page-analysis" class="p-6">
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    <!-- 左侧上传区 -->
                    <div class="lg:col-span-1">
                        <div class="bg-gray-50 p-6 rounded-xl">
                            <h2 class="text-xl font-semibold mb-4 text-gray-800">影像上传</h2>
                            <div id="upload-area" class="border-2 border-dashed border-gray-300 rounded-xl p-8 text-center mb-4 cursor-pointer hover:border-blue-400 transition">
                                <i class="fas fa-cloud-upload-alt text-4xl text-blue-400 mb-3"></i>
                                <p class="text-gray-500 mb-2">拖放卫星/无人机影像到这里</p>
                                <p class="text-sm text-gray-400 mb-4">支持JPG/PNG格式</p>
                                <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition">
                                    选择文件
                                </button>
                                <input type="file" id="image-upload" class="hidden" accept="image/jpeg,image/png">
                            </div>
                            <div id="upload-progress" class="hidden mb-4">
                                <div class="flex justify-between text-sm mb-1">
                                    <span class="text-gray-600">上传进度</span>
                                    <span id="progress-percentage" class="text-blue-500">0%</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-2">
                                    <div id="progress-bar" class="bg-blue-500 h-2 rounded-full progress-bar" style="width: 0%"></div>
                                </div>
                            </div>
                            <div class="mb-4">
                                <label class="block text-gray-700 mb-2">盐碱化分析参数</label>
                                <select class="w-full p-2 border border-gray-300 rounded-lg">
                                    <option>标准分析模式</option>
                                    <option>高精度分析模式</option>
                                    <option>快速分析模式</option>
                                </select>
                            </div>
                            <button id="start-analysis" class="w-full py-3 bg-green-500 text-white rounded-lg hover:bg-green-600 transition flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                                <i class="fas fa-play mr-2"></i>开始分析
                            </button>
                        </div>
                    </div>
                    
                    <!-- 右侧结果区 -->
                    <div class="lg:col-span-2">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                            <div class="bg-gray-50 p-6 rounded-xl scale-hover">
                                <h3 class="font-medium text-gray-700 mb-3">盐碱化等级分布</h3>
                                <div class="h-48 rounded-lg">
                                    <canvas id="salinity-map"></canvas>
                                </div>
                                <div class="flex justify-between mt-3 text-xs text-gray-500">
                                    <span>轻度</span>
                                    <span>中度</span>
                                    <span>重度</span>
                                </div>
                            </div>
                            <div class="bg-gray-50 p-6 rounded-xl scale-hover">
                                <h3 class="font-medium text-gray-700 mb-3">盐碱化等级统计</h3>
                                <div class="h-48">
                                    <canvas id="salinity-pie"></canvas>
                                </div>
                                <div class="text-center mt-2 text-sm text-gray-600">
                                    中度盐碱化区域占比
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-gray-50 p-6 rounded-xl mb-6 scale-hover">
                            <div class="flex justify-between items-center mb-4">
                                <h3 class="font-medium text-gray-700">地形特征分析</h3>
                                <button id="export-report" class="text-blue-500 text-sm flex items-center hover:underline">
                                    <i class="fas fa-download mr-1"></i>导出报告
                                </button>
                            </div>
                            <div class="space-y-3">
                                <div class="flex justify-between">
                                    <span class="text-gray-600">土壤颜色指数</span>
                                    <span class="font-medium">0.72</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-2">
                                    <div class="bg-orange-400 h-2 rounded-full" style="width: 72%"></div>
                                </div>
                                
                                <div class="flex justify-between">
                                    <span class="text-gray-600">地表裂纹密度</span>
                                    <span class="font-medium">0.45</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-2">
                                    <div class="bg-red-400 h-2 rounded-full" style="width: 45%"></div>
                                </div>
                                
                                <div class="flex justify-between">
                                    <span class="text-gray-600">地形坡度</span>
                                    <span class="font-medium">3.2°</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-2">
                                    <div class="bg-blue-400 h-2 rounded-full" style="width: 32%"></div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-gray-50 p-6 rounded-xl scale-hover">
                            <h3 class="font-medium text-gray-700 mb-4">GIS关联分析</h3>
                            <div class="h-64 rounded-lg">
                                <canvas id="gis-map"></canvas>
                            </div>
                            <div class="mt-4 grid grid-cols-3 gap-4">
                                <div class="bg-white p-3 rounded-lg text-center shadow-sm">
                                    <div class="text-blue-500 mb-1"><i class="fas fa-mountain"></i></div>
                                    <div class="text-sm text-gray-600">平均海拔</div>
                                    <div class="font-medium">124.5m</div>
                                </div>
                                <div class="bg-white p-3 rounded-lg text-center shadow-sm">
                                    <div class="text-green-500 mb-1"><i class="fas fa-slope"></i></div>
                                    <div class="text-sm text-gray-600">最大坡度</div>
                                    <div class="font-medium">8.7°</div>
                                </div>
                                <div class="bg-white p-3 rounded-lg text-center shadow-sm">
                                    <div class="text-orange-500 mb-1"><i class="fas fa-ruler-combined"></i></div>
                                    <div class="text-sm text-gray-600">面积</div>
                                    <div class="font-medium">4.2km²</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 生物量统计页面 -->
            <div id="page-biomass" class="p-6 hidden">
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    <!-- 左侧上传区 -->
                    <div class="lg:col-span-1">
                        <div class="bg-gray-50 p-6 rounded-xl">
                            <h2 class="text-xl font-semibold mb-4 text-gray-800">植被影像上传</h2>
                            <div id="vegetation-upload-area" class="border-2 border-dashed border-gray-300 rounded-xl p-8 text-center mb-4 cursor-pointer hover:border-green-400 transition">
                                <i class="fas fa-cloud-upload-alt text-4xl text-green-400 mb-3"></i>
                                <p class="text-gray-500 mb-2">拖放植被影像到这里</p>
                                <p class="text-sm text-gray-400 mb-4">支持JPG/PNG格式</p>
                                <button class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition">
                                    选择文件
                                </button>
                                <input type="file" id="vegetation-image-upload" class="hidden" accept="image/jpeg,image/png">
                            </div>
                            <div id="vegetation-upload-progress" class="hidden mb-4">
                                <div class="flex justify-between text-sm mb-1">
                                    <span class="text-gray-600">上传进度</span>
                                    <span id="vegetation-progress-percentage" class="text-green-500">0%</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-2">
                                    <div id="vegetation-progress-bar" class="bg-green-500 h-2 rounded-full progress-bar" style="width: 0%"></div>
                                </div>
                            </div>
                            <div class="mb-4">
                                <label class="block text-gray-700 mb-2">生物量估算模型</label>
                                <select class="w-full p-2 border border-gray-300 rounded-lg">
                                    <option>NDVI标准模型</option>
                                    <option>增强植被指数(EVI)</option>
                                    <option>自定义参数</option>
                                </select>
                            </div>
                            <button id="start-biomass" class="w-full py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                                <i class="fas fa-chart-line mr-2"></i>开始统计
                            </button>
                        </div>
                    </div>
                    
                    <!-- 右侧结果区 -->
                    <div class="lg:col-span-2">
                        <div class="bg-gray-50 p-6 rounded-xl mb-6 scale-hover">
                            <div class="flex justify-between items-center mb-4">
                                <h3 class="font-medium text-gray-700">植被类型分布</h3>
                                <div class="flex space-x-2">
                                    <button id="biomass-data-btn" class="px-3 py-1 bg-white rounded-lg text-sm shadow-sm hover:bg-gray-50">
                                        <i class="fas fa-table mr-1"></i>数据
                                    </button>
                                    <button id="biomass-chart-btn" class="px-3 py-1 bg-blue-500 text-white rounded-lg text-sm">
                                        <i class="fas fa-chart-pie mr-1"></i>图表
                                    </button>
                                </div>
                            </div>
                            <div class="grid grid-cols-3 gap-4 mb-4">
                                <div class="bg-white p-4 rounded-lg shadow-sm text-center">
                                    <div class="h-16 w-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-2">
                                        <i class="fas fa-seedling text-green-500 text-xl"></i>
                                    </div>
                                    <div class="text-sm text-gray-600">草本植物</div>
                                    <div class="font-medium">42%</div>
                                </div>
                                <div class="bg-white p-4 rounded-lg shadow-sm text-center">
                                    <div class="h-16 w-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-2">
                                        <i class="fas fa-tree text-green-500 text-xl"></i>
                                    </div>
                                    <div class="text-sm text-gray-600">灌木</div>
                                    <div class="font-medium">28%</div>
                                </div>
                                <div class="bg-white p-4 rounded-lg shadow-sm text-center">
                                    <div class="h-16 w-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-2">
                                        <i class="fas fa-forest text-green-500 text-xl"></i>
                                    </div>
                                    <div class="text-sm text-gray-600">乔木</div>
                                    <div class="font-medium">30%</div>
                                </div>
                            </div>
                            <div class="h-48 rounded-lg">
                                <canvas id="vegetation-map"></canvas>
                            </div>
                        </div>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                            <div class="bg-gray-50 p-6 rounded-xl scale-hover">
                                <h3 class="font-medium text-gray-700 mb-3">生物量统计</h3>
                                <div class="space-y-4">
                                    <div>
                                        <div class="flex justify-between text-sm text-gray-600 mb-1">
                                            <span>干重</span>
                                            <span>2.4 t/ha</span>
                                        </div>
                                        <div class="w-full bg-gray-200 rounded-full h-2">
                                            <div class="bg-yellow-600 h-2 rounded-full" style="width: 60%"></div>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="flex justify-between text-sm text-gray-600 mb-1">
                                            <span>鲜重</span>
                                            <span>5.8 t/ha</span>
                                        </div>
                                        <div class="w-full bg-gray-200 rounded-full h-2">
                                            <div class="bg-green-500 h-2 rounded-full" style="width: 80%"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="mt-6 bg-white p-4 rounded-lg shadow-sm">
                                    <div class="flex justify-between items-center">
                                        <span class="text-gray-600">总生物量</span>
                                        <span class="font-bold text-lg">8.2 t/ha</span>
                                    </div>
                                </div>
                            </div>
                            <div class="bg-gray-50 p-6 rounded-xl scale-hover">
                                <h3 class="font-medium text-gray-700 mb-3">历史变化趋势</h3>
                                <div class="h-48 rounded-lg">
                                    <canvas id="biomass-trend"></canvas>
                                </div>
                                <div class="mt-4 text-sm text-gray-500">
                                    <i class="fas fa-info-circle mr-1 text-blue-400"></i>
                                    较去年同期增长12%
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-gray-50 p-6 rounded-xl scale-hover">
                            <div class="flex justify-between items-center mb-4">
                                <h3 class="font-medium text-gray-700">区域对比分析</h3>
                                <button class="text-blue-500 text-sm flex items-center hover:underline">
                                    <i class="fas fa-expand mr-1"></i>全屏查看
                                </button>
                            </div>
                            <div class="h-64 rounded-lg">
                                <canvas id="area-comparison"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 数据管理页面 -->
            <div id="page-data" class="p-6 hidden">
                <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
                    <!-- 左侧菜单 -->
                    <div class="lg:col-span-1">
                        <div class="bg-gray-50 p-6 rounded-xl">
                            <h2 class="text-xl font-semibold mb-4 text-gray-800">数据管理</h2>
                            <nav class="space-y-2">
                                <button class="data-menu w-full text-left px-4 py-3 rounded-lg bg-blue-50 text-blue-600 font-medium flex items-center">
                                    <i class="fas fa-history mr-2"></i>历史记录
                                </button>
                                <button class="data-menu w-full text-left px-4 py-3 rounded-lg text-gray-600 hover:bg-gray-100 flex items-center">
                                    <i class="fas fa-sliders-h mr-2"></i>参数设置
                                </button>
                                <button class="data-menu w-full text-left px-4 py-3 rounded-lg text-gray-600 hover:bg-gray-100 flex items-center">
                                    <i class="fas fa-file-export mr-2"></i>数据导出
                                </button>
                                <button class="data-menu w-full text-left px-4 py-3 rounded-lg text-gray-600 hover:bg-gray-100 flex items-center">
                                    <i class="fas fa-map-marker-alt mr-2"></i>样地标注
                                </button>
                                <button class="data-menu w-full text-left px-4 py-3 rounded-lg text-gray-600 hover:bg-gray-100 flex items-center">
                                    <i class="fas fa-tools mr-2"></i>系统工具
                                </button>
                            </nav>
                        </div>
                    </div>
                    
                    <!-- 右侧内容区 -->
                    <div class="lg:col-span-3">
                        <!-- 历史记录 -->
                        <div id="data-history" class="bg-gray-50 p-6 rounded-xl">
                            <div class="flex justify-between items-center mb-6">
                                <h3 class="text-lg font-medium text-gray-800">分析历史记录</h3>
                                <div class="flex space-x-2">
                                    <button id="filter-btn" class="px-3 py-1 bg-white rounded-lg text-sm shadow-sm flex items-center hover:bg-gray-50">
                                        <i class="fas fa-filter mr-1"></i>筛选
                                    </button>
                                    <button id="refresh-btn" class="px-3 py-1 bg-blue-500 text-white rounded-lg text-sm flex items-center hover:bg-blue-600">
                                        <i class="fas fa-sync-alt mr-1"></i>刷新
                                    </button>
                                </div>
                            </div>
                            
                            <div class="overflow-x-auto">
                                <table class="min-w-full bg-white rounded-lg overflow-hidden shadow-sm">
                                    <thead>
                                        <tr class="bg-gray-100 text-gray-600 text-left">
                                            <th class="py-3 px-4">日期</th>
                                            <th class="py-3 px-4">分析类型</th>
                                            <th class="py-3 px-4">文件名称</th>
                                            <th class="py-3 px-4">结果摘要</th>
                                            <th class="py-3 px-4">操作</th>
                                        </tr>
                                    </thead>
                                    <tbody class="divide-y divide-gray-200">
                                        <tr class="hover:bg-gray-50">
                                            <td class="py-3 px-4">2025-05-25</td>
                                            <td class="py-3 px-4">
                                                <span class="px-2 py-1 bg-blue-100 text-blue-600 rounded-full text-xs">地形分析</span>
                                            </td>
                                            <td class="py-3 px-4">sample_001.jpg</td>
                                            <td class="py-3 px-4">
                                                <div class="flex space-x-1">
                                                    <span class="w-3 h-3 rounded-full bg-yellow-400"></span>
                                                    <span class="w-3 h-3 rounded-full bg-orange-400"></span>
                                                    <span class="w-3 h-3 rounded-full bg-red-400"></span>
                                                </div>
                                            </td>
                                            <td class="py-3 px-4">
                                                <button class="text-blue-500 hover:text-blue-700 mr-2">
                                                    <i class="fas fa-eye"></i>
                                                </button>
                                                <button class="text-gray-500 hover:text-gray-700">
                                                    <i class="fas fa-download"></i>
                                                </button>
                                            </td>
                                        </tr>
                                        <tr class="hover:bg-gray-50">
                                            <td class="py-3 px-4">2025-05-25</td>
                                            <td class="py-3 px-4">
                                                <span class="px-2 py-1 bg-green-100 text-green-600 rounded-full text-xs">生物量</span>
                                            </td>
                                            <td class="py-3 px-4">vegetation_005.png</td>
                                            <td class="py-3 px-4">
                                                <div class="flex space-x-1">
                                                    <span class="w-3 h-3 rounded-full bg-green-300"></span>
                                                    <span class="w-3 h-3 rounded-full bg-green-500"></span>
                                                    <span class="w-3 h-3 rounded-full bg-green-700"></span>
                                                </div>
                                            </td>
                                            <td class="py-3 px-4">
                                                <button class="text-blue-500 hover:text-blue-700 mr-2">
                                                    <i class="fas fa-eye"></i>
                                                </button>
                                                <button class="text-gray-500 hover:text-gray-700">
                                                    <i class="fas fa-download"></i>
                                                </button>
                                            </td>
                                        </tr>
                                        <tr class="hover:bg-gray-50">
                                            <td class="py-3 px-4">2025-05-25</td>
                                            <td class="py-3 px-4">
                                                <span class="px-2 py-1 bg-blue-100 text-blue-600 rounded-full text-xs">地形分析</span>
                                            </td>
                                            <td class="py-3 px-4">field_003.jpg</td>
                                            <td class="py-3 px-4">
                                                <div class="flex space-x-1">
                                                    <span class="w-3 h-3 rounded-full bg-yellow-400"></span>
                                                    <span class="w-3 h-3 rounded-full bg-yellow-400"></span>
                                                    <span class="w-3 h-3 rounded-full bg-orange-400"></span>
                                                </div>
                                            </td>
                                            <td class="py-3 px-4">
                                                <button class="text-blue-500 hover:text-blue-700 mr-2">
                                                    <i class="fas fa-eye"></i>
                                                </button>
                                                <button class="text-gray-500 hover:text-gray-700">
                                                    <i class="fas fa-download"></i>
                                                </button>
                                            </td>
                                        </tr>
                                        <tr class="hover:bg-gray-50">
                                            <td class="py-3 px-4">2025-05-25</td>
                                            <td class="py-3 px-4">
                                                <span class="px-2 py-1 bg-green-100 text-green-600 rounded-full text-xs">生物量</span>
                                            </td>
                                            <td class="py-3 px-4">area_002.png</td>
                                            <td class="py-3 px-4">
                                                <div class="flex space-x-1">
                                                    <span class="w-3 h-3 rounded-full bg-green-300"></span>
                                                    <span class="w-3 h-3 rounded-full bg-green-300"></span>
                                                    <span class="w-3 h-3 rounded-full bg-green-500"></span>
                                                </div>
                                            </td>
                                            <td class="py-3 px-4">
                                                <button class="text-blue-500 hover:text-blue-700 mr-2">
                                                    <i class="fas fa-eye"></i>
                                                </button>
                                                <button class="text-gray-500 hover:text-gray-700">
                                                    <i class="fas fa-download"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            
                            <div class="flex justify-between items-center mt-4">
                                <div class="text-sm text-gray-500">
                                    显示 1-4 条，共 12 条记录
                                </div>
                                <div class="flex space-x-1">
                                    <button class="w-8 h-8 flex items-center justify-center bg-white rounded-lg shadow-sm hover:bg-gray-50">
                                        <i class="fas fa-chevron-left text-gray-500"></i>
                                    </button>
                                    <button class="w-8 h-8 flex items-center justify-center bg-blue-500 text-white rounded-lg">
                                        1
                                    </button>
                                    <button class="w-8 h-8 flex items-center justify-center bg-white rounded-lg shadow-sm hover:bg-gray-50">
                                        2
                                    </button>
                                    <button class="w-8 h-8 flex items-center justify-center bg-white rounded-lg shadow-sm hover:bg-gray-50">
                                        <i class="fas fa-chevron-right text-gray-500"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 参数设置 (默认隐藏) -->
                        <div id="data-settings" class="bg-gray-50 p-6 rounded-xl hidden">
                            <h3 class="text-lg font-medium text-gray-800 mb-6">分析参数设置</h3>
                            <div class="space-y-6">
                                <div>
                                    <h4 class="font-medium text-gray-700 mb-3">盐碱化分析参数</h4>
                                    <div class="bg-white p-4 rounded-lg shadow-sm space-y-4">
                                        <div>
                                            <label class="block text-gray-600 mb-1">光谱指数阈值</label>
                                            <input type="range" min="0" max="100" value="65" class="w-full">
                                            <div class="flex justify-between text-xs text-gray-500 mt-1">
                                                <span>0</span>
                                                <span>25</span>
                                                <span>50</span>
                                                <span>75</span>
                                                <span>100</span>
                                            </div>
                                        </div>
                                        <div>
                                            <label class="block text-gray-600 mb-1">颜色识别敏感度</label>
                                            <div class="flex space-x-4">
                                                <label class="flex items-center">
                                                    <input type="radio" name="color_sensitivity" class="mr-2" checked>
                                                    <span>标准</span>
                                                </label>
                                                <label class="flex items-center">
                                                    <input type="radio" name="color_sensitivity" class="mr-2">
                                                    <span>高敏感</span>
                                                </label>
                                                <label class="flex items-center">
                                                    <input type="radio" name="color_sensitivity" class="mr-2">
                                                    <span>自定义</span>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div>
                                    <h4 class="font-medium text-gray-700 mb-3">生物量分析参数</h4>
                                    <div class="bg-white p-4 rounded-lg shadow-sm space-y-4">
                                        <div>
                                            <label class="block text-gray-600 mb-1">NDVI阈值</label>
                                            <div class="flex items-center space-x-2">
                                                <input type="number" class="w-20 p-2 border border-gray-300 rounded-lg" value="0.45">
                                                <span class="text-gray-500">至</span>
                                                <input type="number" class="w-20 p-2 border border-gray-300 rounded-lg" value="0.85">
                                            </div>
                                        </div>
                                        <div>
                                            <label class="block text-gray-600 mb-1">植被类型权重</label>
                                            <div class="grid grid-cols-3 gap-3">
                                                <div>
                                                    <label class="block text-xs text-gray-500 mb-1">草本</label>
                                                    <input type="number" class="w-full p-2 border border-gray-300 rounded-lg" value="1.0">
                                                </div>
                                                <div>
                                                    <label class="block text-xs text-gray-500 mb-1">灌木</label>
                                                    <input type="number" class="w-full p-2 border border-gray-300 rounded-lg" value="1.2">
                                                </div>
                                                <div>
                                                    <label class="block text-xs text-gray-500 mb-1">乔木</label>
                                                    <input type="number" class="w-full p-2 border border-gray-300 rounded-lg" value="1.5">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="flex justify-end space-x-3">
                                    <button class="px-4 py-2 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-100">
                                        取消
                                    </button>
                                    <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
                                        保存设置
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底部信息 -->
        <footer class="mt-8 text-center text-gray-500 text-sm">
            <p>智能盐碱地检测分析平台 </p>
            <p class="mt-1">适用于生态监测等领域</p>
        </footer>
    </div>

    <script>
        // 初始化图表
        document.addEventListener('DOMContentLoaded', function() {
            // 盐碱化等级分布图表
            const salinityCtx = document.getElementById('salinity-map').getContext('2d');
            new Chart(salinityCtx, {
                type: 'bar',
                data: {
                    labels: ['轻度', '中度', '重度'],
                    datasets: [{
                        label: '面积占比 (%)',
                        data: [30, 45, 25],
                        backgroundColor: [
                            'rgba(255, 206, 86, 0.7)',
                            'rgba(255, 128, 0, 0.7)',
                            'rgba(255, 99, 132, 0.7)'
                        ],
                        borderColor: [
                            'rgb(255, 206, 86)',
                            'rgb(255, 128, 0)',
                            'rgb(255, 99, 132)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            max: 100
                        }
                    }
                }
            });

            // 盐碱化等级统计饼图
            const salinityPieCtx = document.getElementById('salinity-pie').getContext('2d');
            new Chart(salinityPieCtx, {
                type: 'doughnut',
                data: {
                    labels: ['轻度', '中度', '重度'],
                    datasets: [{
                        data: [30, 45, 25],
                        backgroundColor: [
                            'rgba(255, 206, 86, 0.7)',
                            'rgba(255, 128, 0, 0.7)',
                            'rgba(255, 99, 132, 0.7)'
                        ],
                        borderColor: [
                            'rgb(255, 206, 86)',
                            'rgb(255, 128, 0)',
                            'rgb(255, 99, 132)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    cutout: '70%',
                    plugins: {
                        legend: {
                            position: 'bottom'
                        }
                    }
                }
            });

            // GIS关联分析图表
            const gisCtx = document.getElementById('gis-map').getContext('2d');
            new Chart(gisCtx, {
                type: 'scatter',
                data: {
                    datasets: [{
                        label: '地形特征点',
                        data: [
                            { x: 10, y: 20 },
                            { x: 15, y: 15 },
                            { x: 20, y: 25 },
                            { x: 25, y: 10 },
                            { x: 30, y: 30 },
                            { x: 35, y: 20 },
                            { x: 40, y: 25 },
                            { x: 45, y: 15 },
                            { x: 50, y: 30 },
                            { x: 55, y: 20 },
                            { x: 60, y: 25 },
                            { x: 65, y: 15 },
                            { x: 70, y: 30 },
                            { x: 75, y: 20 },
                            { x: 80, y: 25 },
                            { x: 85, y: 15 },
                            { x: 90, y: 30 },
                            { x: 95, y: 20 },
                        ],
                        backgroundColor: 'rgba(54, 162, 235, 0.7)',
                        borderColor: 'rgb(54, 162, 235)',
                        borderWidth: 1,
                        pointRadius: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        x: {
                            min: 0,
                            max: 100,
                            title: {
                                display: true,
                                text: '经度'
                            }
                        },
                        y: {
                            min: 0,
                            max: 100,
                            title: {
                                display: true,
                                text: '纬度'
                            }
                        }
                    }
                }
            });

            // 植被类型分布图表
            const vegetationCtx = document.getElementById('vegetation-map').getContext('2d');
            new Chart(vegetationCtx, {
                type: 'line',
                data: {
                    labels: ['A区', 'B区', 'C区', 'D区', 'E区'],
                    datasets: [{
                        label: '草本植物',
                        data: [45, 30, 20, 50, 35],
                        borderColor: 'rgb(75, 192, 192)',
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        tension: 0.3,
                        fill: true
                    }, {
                        label: '灌木',
                        data: [30, 25, 40, 20, 30],
                        borderColor: 'rgb(54, 162, 235)',
                        backgroundColor: 'rgba(54, 162, 235, 0.2)',
                        tension: 0.3,
                        fill: true
                    }, {
                        label: '乔木',
                        data: [25, 45, 40, 30, 35],
                        borderColor: 'rgb(153, 102, 255)',
                        backgroundColor: 'rgba(153, 102, 255, 0.2)',
                        tension: 0.3,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            max: 100,
                            title: {
                                display: true,
                                text: '覆盖率 (%)'
                            }
                        }
                    }
                }
            });

            // 生物量变化趋势图表
            const biomassTrendCtx = document.getElementById('biomass-trend').getContext('2d');
            new Chart(biomassTrendCtx, {
                type: 'line',
                data: {
                    labels: ['2018', '2019', '2020', '2021', '2022', '2023'],
                    datasets: [{
                        label: '生物量 (t/ha)',
                        data: [5.2, 5.5, 6.1, 6.8, 7.3, 8.2],
                        borderColor: 'rgb(75, 192, 192)',
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        tension: 0.3,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            title: {
                                display: true,
                                text: '生物量 (t/ha)'
                            }
                        }
                    }
                }
            });

            // 区域对比分析图表
            const areaComparisonCtx = document.getElementById('area-comparison').getContext('2d');
            new Chart(areaComparisonCtx, {
                type: 'bar',
                data: {
                    labels: ['A区', 'B区', 'C区'],
                    datasets: [{
                        label: '生物量 (t/ha)',
                        data: [3.2, 5.6, 7.1],
                        backgroundColor: [
                            'rgba(54, 162, 235, 0.7)',
                            'rgba(75, 192, 192, 0.7)',
                            'rgba(153, 102, 255, 0.7)'
                        ],
                        borderColor: [
                            'rgb(54, 162, 235)',
                            'rgb(75, 192, 192)',
                            'rgb(153, 102, 255)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            title: {
                                display: true,
                                text: '生物量 (t/ha)'
                            }
                        }
                    }
                }
            });
        });

        // 标签页切换
        const tabs = document.querySelectorAll('[id^="tab-"]');
        const pages = document.querySelectorAll('[id^="page-"]');
        
        tabs.forEach(tab => {
            tab.addEventListener('click', () => {
                // 更新标签样式
                tabs.forEach(t => t.classList.remove('tab-active'));
                tab.classList.add('tab-active');
                
                // 显示对应页面并添加淡入动画
                const targetId = tab.id.replace('tab-', 'page-');
                pages.forEach(page => {
                    page.classList.add('hidden');
                });
                const targetPage = document.getElementById(targetId);
                targetPage.classList.remove('hidden');
                targetPage.classList.add('fade-in');
            });
        });
        
        // 数据管理菜单切换
        const dataMenus = document.querySelectorAll('.data-menu');
        const dataSections = document.querySelectorAll('#data-history, #data-settings');
        
        dataMenus.forEach((menu, index) => {
            menu.addEventListener('click', () => {
                // 更新菜单样式
                dataMenus.forEach(m => {
                    m.classList.remove('bg-blue-50', 'text-blue-600', 'font-medium');
                    m.classList.add('text-gray-600');
                });
                menu.classList.add('bg-blue-50', 'text-blue-600', 'font-medium');
                menu.classList.remove('text-gray-600');
                
                // 显示对应区域
                dataSections.forEach(section => section.classList.add('hidden'));
                if(index === 0) {
                    document.getElementById('data-history').classList.remove('hidden');
                } else if(index === 1) {
                    document.getElementById('data-settings').classList.remove('hidden');
                }
            });
        });

        // 影像上传功能
        const uploadArea = document.getElementById('upload-area');
        const imageUpload = document.getElementById('image-upload');
        const uploadProgress = document.getElementById('upload-progress');
        const progressBar = document.getElementById('progress-bar');
        const progressPercentage = document.getElementById('progress-percentage');
        const startAnalysisBtn = document.getElementById('start-analysis');

        uploadArea.addEventListener('click', () => {
            imageUpload.click();
        });

        uploadArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            uploadArea.classList.add('border-blue-400');
        });

        uploadArea.addEventListener('dragleave', () => {
            uploadArea.classList.remove('border-blue-400');
        });

        uploadArea.addEventListener('drop', (e) => {
            e.preventDefault();
            uploadArea.classList.remove('border-blue-400');
            
            if (e.dataTransfer.files.length) {
                handleFileUpload(e.dataTransfer.files[0]);
            }
        });

        imageUpload.addEventListener('change', () => {
            if (imageUpload.files.length) {
                handleFileUpload(imageUpload.files[0]);
            }
        });

        function handleFileUpload(file) {
            // 检查文件类型
            const fileType = file.type;
            const validImageTypes = ['image/jpeg', 'image/png'];
            
            if (!validImageTypes.includes(fileType)) {
                alert('请上传JPG或PNG格式的图片！');
                return;
            }
            
            // 显示上传进度
            uploadProgress.classList.remove('hidden');
            
            // 模拟上传进度
            let progress = 0;
            const interval = setInterval(() => {
                progress += 1;
                progressBar.style.width = `${progress}%`;
                progressPercentage.textContent = `${progress}%`;
                
                if (progress >= 100) {
                    clearInterval(interval);
                    setTimeout(() => {
                        uploadProgress.classList.add('hidden');
                        alert('文件上传成功！');
                        startAnalysisBtn.disabled = false;
                    }, 500);
                }
            }, 30);
        }

        // 生物量影像上传功能
        const vegetationUploadArea = document.getElementById('vegetation-upload-area');
        const vegetationImageUpload = document.getElementById('vegetation-image-upload');
        const vegetationUploadProgress = document.getElementById('vegetation-upload-progress');
        const vegetationProgressBar = document.getElementById('vegetation-progress-bar');
        const vegetationProgressPercentage = document.getElementById('vegetation-progress-percentage');
        const startBiomassBtn = document.getElementById('start-biomass');

        vegetationUploadArea.addEventListener('click', () => {
            vegetationImageUpload.click();
        });

        vegetationUploadArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            vegetationUploadArea.classList.add('border-green-400');
        });

        vegetationUploadArea.addEventListener('dragleave', () => {
            vegetationUploadArea.classList.remove('border-green-400');
        });

        vegetationUploadArea.addEventListener('drop', (e) => {
            e.preventDefault();
            vegetationUploadArea.classList.remove('border-green-400');
            
            if (e.dataTransfer.files.length) {
                handleVegetationFileUpload(e.dataTransfer.files[0]);
            }
        });

        vegetationImageUpload.addEventListener('change', () => {
            if (vegetationImageUpload.files.length) {
                handleVegetationFileUpload(vegetationImageUpload.files[0]);
            }
        });

        function handleVegetationFileUpload(file) {
            // 检查文件类型
            const fileType = file.type;
            const validImageTypes = ['image/jpeg', 'image/png'];
            
            if (!validImageTypes.includes(fileType)) {
                alert('请上传JPG或PNG格式的图片！');
                return;
            }
            
            // 显示上传进度
            vegetationUploadProgress.classList.remove('hidden');
            
            // 模拟上传进度
            let progress = 0;
            const interval = setInterval(() => {
                progress += 1;
                vegetationProgressBar.style.width = `${progress}%`;
                vegetationProgressPercentage.textContent = `${progress}%`;
                
                if (progress >= 100) {
                    clearInterval(interval);
                    setTimeout(() => {
                        vegetationUploadProgress.classList.add('hidden');
                        alert('文件上传成功！');
                        startBiomassBtn.disabled = false;
                    }, 500);
                }
            }, 30);
        }

        // 开始分析按钮
        startAnalysisBtn.addEventListener('click', () => {
            alert('分析任务已提交，正在后台处理中...');
        });

        // 开始生物量统计按钮
        startBiomassBtn.addEventListener('click', () => {
            alert('生物量统计任务已提交，正在后台处理中...');
        });

        // 导出报告按钮
        document.getElementById('export-report').addEventListener('click', () => {
            alert('报告导出成功！');
        });

        // 刷新数据按钮
        document.getElementById('refresh-btn').addEventListener('click', () => {
            alert('数据已刷新！');
        });

        // 筛选按钮
        document.getElementById('filter-btn').addEventListener('click', () => {
            alert('筛选功能将在未来版本中实现！');
        });

        // 生物量数据/图表切换
        document.getElementById('biomass-data-btn').addEventListener('click', () => {
            document.getElementById('biomass-data-btn').classList.add('bg-blue-500', 'text-white');
            document.getElementById('biomass-data-btn').classList.remove('bg-white', 'text-gray-600');
            
            document.getElementById('biomass-chart-btn').classList.remove('bg-blue-500', 'text-white');
            document.getElementById('biomass-chart-btn').classList.add('bg-white', 'text-gray-600');
            
            alert('数据视图将在未来版本中实现！');
        });

        document.getElementById('biomass-chart-btn').addEventListener('click', () => {
            document.getElementById('biomass-chart-btn').classList.add('bg-blue-500', 'text-white');
            document.getElementById('biomass-chart-btn').classList.remove('bg-white', 'text-gray-600');
            
            document.getElementById('biomass-data-btn').classList.remove('bg-blue-500', 'text-white');
            document.getElementById('biomass-data-btn').classList.add('bg-white', 'text-gray-600');
        });

        // 登录模态框
        const loginBtn = document.getElementById('login-btn');
        const loginModal = document.getElementById('login-modal');
        const closeLogin = document.getElementById('close-login');

        loginBtn.addEventListener('click', () => {
            loginModal.classList.remove('hidden');
        });

        closeLogin.addEventListener('click', () => {
            loginModal.classList.add('hidden');
        });

        // 点击模态框外部关闭
        loginModal.addEventListener('click', (e) => {
            if (e.target === loginModal) {
                loginModal.classList.add('hidden');
            }
        });
    </script>
</body>
</html>
    